<style type="text/less" lang="less" scoped>
    @import url('./index.less');
</style>

<template>
    <el-container class="image-detail" ref="image-detail">
        <el-row :gutter="20">
            <el-col :span="12" class="content-main">
                <p class="title" v-html="webData.title"></p>

                <div class="auther" v-html="webData.auther"></div>

                <iframe class="content-iframe" ref="content-iframe" hidefocus="true" frameborder="0" scrolling="no" style="width: 100%;"></iframe>

                <div class="analyze">
                    <router-link :to="'/connect/images?type='+$route.query.type+'&id='+$route.query.id"><i class="iconfont icon-analyze"></i>返回</router-link>
                    <a href="javascript:;" @click="importAnalyze"><i class="el-icon-upload"></i>导入</a>
                </div>

                <el-container class="tool">
                    <el-aside width="80px" class="buttons">
                        <el-radio-group v-model="editType" size="medium">
                            <el-radio-button label="nodes" title="节点"><i class="el-icon-location"></i></el-radio-button>
                            <el-radio-button label="relations" title="关系"><i class="el-icon-sort"></i></el-radio-button>
                        </el-radio-group>
                    </el-aside>
                    <el-main class="bodys">
                        <div class="nodes" v-show="editType == 'nodes'">
                            <!--<a href="javascript:;" class="node-type bg-county" title="国家" @click="selNode('国家', 3)"></a>-->
                            <a href="javascript:;" class="node-type bg-type" title="类型" @click="selNode('type', 1)"></a>
                            <a href="javascript:;" class="node-type bg-entity" title="实体" @click="selNode('entity', 2)"></a>
                            <a href="javascript:;" class="node-type bg-othersc" title="地区" @click="selNode('othersc', 4)"></a>
                            <div style="float: right; padding-right: 10px;" v-show="showTypeLabels || showEntityLabels || showOtherscLabels">
                                <el-button type="text" size="medium" @click="showTypeLabels=false;showEntityLabels=false;showOtherscLabels=false;">取消</el-button>
                                <el-button type="text" size="medium" @click="saveNode">保存</el-button>
                            </div>
                            <div style="float: right; padding-right: 10px;" v-show="!showTypeLabels && !showEntityLabels && !showOtherscLabels">
                                <div style="text-align: right;"><el-button type="text" size="medium" @click="aliasFormOpen">添加别名</el-button></div>
                            </div>

                            <div class="labels relation-edit" v-show="aliasForm.visible" style="right: 0; padding: 5px 10px 0 0;">
                                <el-form ref="aliasForm" :model="aliasForm" size="mini">
                                    <el-form-item style="margin-bottom: 0px; text-align: center; font-weight: bold;">
                                        添加别名
                                    </el-form-item>
                                    <el-form-item label="别名：" label-width="70px">
                                        <el-input v-model="aliasForm.alias" placeholder="请输入别名"></el-input>
                                    </el-form-item>
                                    <el-form-item label="搜索：" label-width="70px">
                                        <el-input v-model="aliasForm.keyword" placeholder="请输入关键词" @change="aliasChange"></el-input>
                                    </el-form-item>
                                    <el-form-item label="关联：" label-width="70px">
                                        <el-cascader v-model="aliasForm.correlation" :options="aliasForm.labels" :show-all-levels="false" ref="correlation"></el-cascader>
                                    </el-form-item>
                                    <el-form-item label-width="70px">
                                        <el-button @click="aliasForm.visible = false">取 消</el-button>
                                        <el-button type="primary" @click="aliasSave">确 定</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="labels relation-edit" v-show="showTypeLabels">
                                <el-form ref="addTypeForm" size="small" :model="addNodeForm" :rules="addNodeForm.rules">
                                    <table style="width: 100%;">
                                        <thead>
                                        <tr>
                                            <th>添加为类型</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-if="addNodeForm.selStr">
                                            <td style="color: #999; font-size: 10px; text-align: center;">({{addNodeForm.selStr}})</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <el-form-item prop="node" style="margin-bottom: 0;" >
                                                    <el-select v-model="addNodeForm.node" value-key="name" placeholder="选择类型">
                                                        <el-option-group>
                                                            <el-option :label="'新类型'" :value="{name: '', label: '', county: ''}"></el-option>
                                                        </el-option-group>
                                                        <el-option-group label="相似类型：">
                                                            <el-option v-for="item in labelsData" :key="item.id" :label="item.name" :value="item">
                                                                <span style="float: left">{{ item.name }}</span>
                                                                <span style="float: right; color: #8492a6; font-size: 13px">&lt;{{ item.label }}&gt;</span>
                                                            </el-option>
                                                        </el-option-group>
                                                    </el-select>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        <tr v-show="addNodeForm.node.label==''">
                                            <td>
                                                <el-form-item prop="label" :rules="{required: addNodeForm.node.label=='' ? true : false, message: '不能为空'}">
                                                    <el-cascader v-model="addNodeForm.label" change-on-select :options="typeLabels" :props="{label: 'label_name', value: 'label_name'}" placeholder="选择标签"></el-cascader>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </el-form>
                            </div>
                            <div class="labels relation-edit" v-show="showEntityLabels">
                                <el-form ref="addEntityForm" size="small" :model="addNodeForm" :rules="addNodeForm.rules">
                                    <table style="width: 100%;">
                                        <thead>
                                        <tr>
                                            <th>添加为实体</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-if="addNodeForm.selStr">
                                            <td style="color: #999; font-size: 10px; text-align: center;">({{addNodeForm.selStr}})</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <el-form-item prop="node" style="margin-bottom: 0;">
                                                    <el-select v-model="addNodeForm.node" value-key="name" placeholder="选择实体">
                                                        <el-option-group>
                                                            <el-option :label="'新实体'" :value="{name: '', label: '', county: ''}"></el-option>
                                                        </el-option-group>
                                                        <el-option-group label="相似实体：">
                                                            <el-option v-for="item in labelsData" :key="item.id" :label="item.name" :value="item">
                                                                <span style="float: left">{{ item.name }}</span>
                                                                <span style="float: right; color: #8492a6; font-size: 13px">&lt;{{ item.label }}&gt;</span>
                                                            </el-option>
                                                        </el-option-group>
                                                    </el-select>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        <tr v-show="addNodeForm.node.county==''">
                                            <td>
                                                <el-form-item prop="label" :rules="{required: addNodeForm.node.county=='' ? true : false, message: '不能为空'}" style="margin-bottom: 0;">
                                                    <el-cascader v-model="addNodeForm.label" change-on-select :options="entityLabels" :props="{label: 'label_name', value: 'label_name'}" placeholder="选择标签"></el-cascader>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        <tr v-show="addNodeForm.node.county==''">
                                            <td>
                                                <el-form-item prop="county" :rules="{required: addNodeForm.node.county=='' ? true : false, message: '不能为空'}">
                                                    <el-select v-model="addNodeForm.county" placeholder="选择国家">
                                                        <el-option v-for="item in countys" :key="item.id" :label="item.name" :value="item.name"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </el-form>
                            </div>
                            <div class="labels relation-edit" v-show="showOtherscLabels">
                                <el-form ref="addOtherscForm" size="small" :model="addNodeForm" :rules="addNodeForm.rules">
                                    <table style="width: 100%;">
                                        <thead>
                                        <tr>
                                            <th>添加为地区</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-if="addNodeForm.selStr">
                                            <td style="color: #999; font-size: 10px; text-align: center;">({{addNodeForm.selStr}})</td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <el-form-item prop="node" style="margin-bottom: 0;">
                                                    <el-select v-model="addNodeForm.node" value-key="name" placeholder="选择类型">
                                                        <el-option-group>
                                                            <el-option :label="'新地区'" :value="{name: '', label: '', county: ''}"></el-option>
                                                        </el-option-group>
                                                        <el-option-group label="相似地区：">
                                                            <el-option v-for="item in labelsData" :key="item.id" :label="item.name" :value="item">
                                                                <span style="float: left">{{ item.name }}</span>
                                                                <span style="float: right; color: #8492a6; font-size: 13px">&lt;{{ item.label }}&gt;</span>
                                                            </el-option>
                                                        </el-option-group>
                                                    </el-select>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        <tr v-show="addNodeForm.node.label==''">
                                            <td>
                                                <el-form-item prop="label" style="margin-bottom: 0;" :rules="{required: addNodeForm.node.label=='' ? true : false, message: '不能为空'}">
                                                    <el-cascader v-model="addNodeForm.label" change-on-select :options="otherscLabels" :props="{label: 'label_name', value: 'label_name'}" placeholder="选择标签"></el-cascader>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        <tr v-show="addNodeForm.node.label==''">
                                            <td>
                                                <el-form-item prop="county" style="margin-bottom: 0;">
                                                    <el-select v-model="addNodeForm.county" clearable placeholder="选择国家">
                                                        <el-option v-for="item in countys" :key="item.id" :label="item.name" :value="item.name"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        <tr v-show="addNodeForm.node.label==''">
                                            <td>
                                                <el-form-item prop="lat.value" style="margin-bottom: 0;" :rules="[{required: addNodeForm.node.label=='' ? true : false, message: '不能为空'}, { type: 'number', message: '必须为数字'}]">
                                                    <el-input placeholder="请输入纬度" v-model.number="addNodeForm.lat.value" style="width: 215px;">
                                                        <el-select v-model="addNodeForm.lat.type" slot="append" placeholder="请选择" style="width: 60px;">
                                                            <el-option label="N" value="N"></el-option>
                                                            <el-option label="S" value="S"></el-option>
                                                        </el-select>
                                                    </el-input>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        <tr v-show="addNodeForm.node.label==''">
                                            <td>
                                                <el-form-item prop="lng.value" :rules="[{required: addNodeForm.node.label=='' ? true : false, message: '不能为空'}, { type: 'number', message: '必须为数字'}]">
                                                    <el-input placeholder="请输入经度" v-model.number="addNodeForm.lng.value" style="width: 215px;">
                                                        <el-select v-model="addNodeForm.lng.type" slot="append" placeholder="请选择" style="width: 60px;">
                                                            <el-option label="E" value="E"></el-option>
                                                            <el-option label="W" value="W"></el-option>
                                                        </el-select>
                                                    </el-input>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </el-form>
                            </div>
                        </div>
                        <div class="relations" v-show="editType == 'relations'">
                            <el-radio-group v-model="relationForm.relationType" size="medium" @change="selRelationChange">
                                <el-radio-button label="移动"></el-radio-button>
                                <el-radio-button label="配置"></el-radio-button>
                                <el-radio-button label="编成"></el-radio-button>
                                <el-radio-button label="活动"></el-radio-button>
                            </el-radio-group>
                            <div style="float: right; padding-right: 10px;" v-show="relationForm.relationType">
                                <el-button type="text" size="medium" @click="relationForm.relationType=''">取消</el-button>
                                <el-button type="text" size="medium" @click="saveRelation">保存</el-button>
                            </div>
                            <div class="relation-edit" v-show="relationForm.relationType == '移动'">
                                <el-form ref="移动" size="small" :show-message="false" :model="relationForm" :rules="relationForm.rules">
                                    <table class="relation-table">
                                        <thead>
                                        <tr>
                                            <th>对象</th>
                                            <th>地区</th>
                                            <th>时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td style="vertical-align: top">
                                                <el-form-item prop="relationObject1" class="obj-form-item">
                                                    <div style="height: 150px; overflow: auto;">
                                                        <el-radio-group v-model="relationForm.relationObject1" size="medium" class="obj-group">
                                                            <template v-for="(item, key) of nodeObj">
                                                                <el-radio-button v-if="item.type==2" :label="item.name" :key="key">{{item.name}}</el-radio-button>
                                                            </template>
                                                        </el-radio-group>
                                                    </div>
                                                </el-form-item>
                                            </td>
                                            <td style="vertical-align: top">
                                                <el-form-item prop="relationObject2" class="obj-form-item">
                                                    <div style="height: 150px; overflow: auto;">
                                                        <el-radio-group v-model="relationForm.relationObject2" size="medium" class="obj-group">
                                                            <template v-for="(item, key) of nodeObj">
                                                                <el-radio-button v-if="item.type==4" :label="item.name" :key="key">{{item.name}}</el-radio-button>
                                                            </template>
                                                        </el-radio-group>
                                                    </div>
                                                </el-form-item>
                                            </td>
                                            <td style="padding: 0 5px;">
                                                <el-form-item prop="relationTime">
                                                    <el-autocomplete v-model="relationForm.relationTime" :fetch-suggestions="timeSearch" placeholder="请输入日期"></el-autocomplete>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        </tbody>
                                        <tfoot>
                                        <td colspan="3" style="padding: 5px;">
                                            <div style="width: 450px">
                                            派往、集结、云集、部署、抵达、开进、进入、驶入、赶赴、开赴、驶离、离开、驶往、前往、调入、游弋、抵近、撤离、通过、经过、停泊、停靠、驻扎、返回、回返、运抵
                                            </div>
                                        </td>
                                        </tfoot>
                                    </table>
                                </el-form>
                            </div>
                            <div class="relation-edit" v-show="relationForm.relationType == '配置'">
                                <el-form ref="配置" size="small" :show-message="false" :model="relationForm" :rules="relationForm.rules">
                                    <table class="relation-table">
                                    <thead>
                                    <tr>
                                        <th>主体</th>
                                        <th>搭载</th>
                                        <th>时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td style="vertical-align: top">
                                            <el-form-item prop="relationObject1" class="obj-form-item">
                                                <div style="height: 150px; overflow: auto;">
                                                    <el-radio-group v-model="relationForm.relationObject1" size="medium" class="obj-group">
                                                        <template v-for="(item, key) of nodeObj">
                                                            <el-radio-button v-if="item.type==2" :label="item.name" :key="key">{{item.name}}</el-radio-button>
                                                            <!--<el-radio-button v-if="entityNames.indexOf(item.type)!=-1" :label="item.name" :key="key">{{item.name}}</el-radio-button>-->
                                                        </template>
                                                    </el-radio-group>
                                                </div>
                                            </el-form-item>
                                        </td>
                                        <td style="vertical-align: top">
                                            <el-form-item prop="relationObject2" class="obj-form-item">
                                                <div style="height: 150px; overflow: auto;">
                                                    <el-radio-group v-model="relationForm.relationObject2" size="medium" class="obj-group">
                                                        <template v-for="(item, key) of nodeObj">
                                                            <el-radio-button v-if="item.type==1" :label="item.name" :key="key">{{item.name}}</el-radio-button>
                                                            <!--<el-radio-button v-if="typeNames.indexOf(item.type)!=-1" :label="item.name" :key="key">{{item.name}}</el-radio-button>-->
                                                        </template>
                                                    </el-radio-group>
                                                </div>
                                            </el-form-item>
                                        </td>
                                        <td style="padding: 0 5px;">
                                            <el-form-item prop="relationTime">
                                                <el-autocomplete v-model="relationForm.relationTime" :fetch-suggestions="timeSearch" placeholder="请输入日期"></el-autocomplete>
                                            </el-form-item>
                                        </td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <td colspan="3" style="padding: 5px;">
                                        满载、搭载、指挥官、配备、载有、携带
                                    </td>
                                    </tfoot>
                                </table>
                                </el-form>
                            </div>
                            <div class="relation-edit" v-show="relationForm.relationType == '编成'">
                                <el-form ref="编成" size="small" :show-message="false" :model="relationForm" :rules="relationForm.rules">
                                    <table class="relation-table">
                                        <thead>
                                        <tr>
                                            <th>个体</th>
                                            <th>组织</th>
                                            <th>时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td style="vertical-align: top">
                                                <el-form-item prop="relationObject1" class="obj-form-item">
                                                    <div style="height: 150px; overflow: auto;">
                                                        <el-radio-group v-model="relationForm.relationObject1" size="medium" class="obj-group">
                                                            <template v-for="(item, key) of nodeObj">
                                                                <el-radio-button v-if="item.type==2" :label="item.name" :key="key">{{item.name}}</el-radio-button>
                                                                <!--<el-radio-button v-if="entityNames.indexOf(item.type)!=-1" :label="item.name" :key="key">{{item.name}}</el-radio-button>-->
                                                            </template>
                                                        </el-radio-group>
                                                    </div>
                                                </el-form-item>
                                            </td>
                                            <td style="vertical-align: top">
                                                <el-form-item prop="relationObject2" class="obj-form-item">
                                                    <div style="height: 150px; overflow: auto;">
                                                        <el-radio-group v-model="relationForm.relationObject2" size="medium" class="obj-group">
                                                            <template v-for="(item, key) of nodeObj">
                                                                <el-radio-button v-if="item.type==2" :label="item.name" :key="key">{{item.name}}</el-radio-button>
                                                                <!--<el-radio-button v-if="entityNames.indexOf(item.type)!=-1" :label="item.name" :key="key">{{item.name}}</el-radio-button>-->
                                                            </template>
                                                        </el-radio-group>
                                                    </div>
                                                </el-form-item>
                                            </td>
                                            <td style="padding: 0 5px;">
                                                <el-form-item prop="relationTime">
                                                    <el-autocomplete v-model="relationForm.relationTime" :fetch-suggestions="timeSearch" placeholder="请输入日期"></el-autocomplete>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                        </tbody>
                                        <tfoot>
                                        <td colspan="3" style="padding: 5px;">
                                            编入、增调
                                        </td>
                                        </tfoot>
                                    </table>
                                </el-form>
                            </div>
                            <div class="relation-edit" v-show="relationForm.relationType == '活动'">
                                <el-form ref="活动" size="small" :show-message="false" :model="relationForm" :rules="relationForm.rules">
                                    <table class="relation-table">
                                    <thead>
                                    <tr>
                                        <th>对象</th>
                                        <th>状态</th>
                                        <th>地区</th>
                                        <th>时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td style="vertical-align: top">
                                            <el-form-item prop="relationObject1" class="obj-form-item">
                                                <div style="height: 150px; overflow: auto;">
                                                    <el-radio-group v-model="relationForm.relationObject1" size="medium" class="obj-group">
                                                        <template v-for="(item, key) of nodeObj">
                                                            <el-radio-button v-if="item.type==2" :label="item.name" :key="key">{{item.name}}</el-radio-button>
                                                            <!--<el-radio-button v-if="entityNames.indexOf(item.type)!=-1" :label="item.name" :key="key">{{item.name}}</el-radio-button>-->
                                                        </template>
                                                    </el-radio-group>
                                                </div>
                                            </el-form-item>
                                        </td>
                                        <td style="vertical-align: top">
                                            <el-form-item prop="relationObject2" class="obj-form-item">
                                                <div style="height: 150px; overflow: auto;">
                                                    <el-radio-group v-model="relationForm.relationObject2" size="medium" class="obj-group">
                                                        <el-radio-button label="事故">事故</el-radio-button>
                                                        <el-radio-button label="维修">维修</el-radio-button>
                                                        <el-radio-button label="任务">任务</el-radio-button>
                                                    </el-radio-group>
                                                </div>
                                            </el-form-item>
                                        </td>
                                        <td style="vertical-align: top">
                                            <el-form-item prop="relationObject3" class="obj-form-item">
                                                <div style="height: 150px; overflow: auto;">
                                                    <el-radio-group v-model="relationForm.relationObject3" size="medium" class="obj-group">
                                                        <template v-for="(item, key) of nodeObj">
                                                            <el-radio-button v-if="item.type==4" :label="item.name" :key="key">{{item.name}}</el-radio-button>
                                                        </template>
                                                    </el-radio-group>
                                                </div>
                                            </el-form-item>
                                        </td>
                                        <td style="padding: 0 5px;">
                                            <el-form-item prop="relationTime">
                                                <el-autocomplete v-model="relationForm.relationTime" :fetch-suggestions="timeSearch" placeholder="请输入日期"></el-autocomplete>
                                            </el-form-item>
                                        </td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <td colspan="4" style="padding: 5px;">
                                        进入、处于、进行、完成、结束
                                    </td>
                                    </tfoot>
                                </table>
                                </el-form>
                            </div>
                        </div>
                    </el-main>
                </el-container>
            </el-col>

            <el-col :span="11" class="content-main-ht">
                <div class="ht-main" style="position: relative;" ref="details_info"></div>
                <div class="nav-header">
                    <p class="nav-text">
                        <span>参数</span>
                        <i class="iconfont icon-edit"></i>
                    </p>
                </div>
                <div class="nav-form" >
                    <el-form ref="form" :model="form" label-width="100px" :rules="form.rules" v-show="selRelation && form.visible">
                        <el-form-item label="名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="描述">
                            <el-input v-model="form.desc"></el-input>
                        </el-form-item>
                        <el-form-item label="开始时间" prop="startTime">
                            <el-autocomplete v-model="form.startTime" :fetch-suggestions="timeSearch" placeholder="请输入日期"></el-autocomplete>
                        </el-form-item>
                        <el-form-item label="结束时间" prop="endTime">
                            <el-autocomplete v-model="form.endTime" :fetch-suggestions="timeSearch" placeholder="请输入日期"></el-autocomplete>
                        </el-form-item>
                        <el-form-item label="性质">
                            <el-input v-model="form.nature"></el-input>
                        </el-form-item>
                        <el-form-item label="程度">
                            <el-input v-model="form.level"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="background-color:#3579f8;" @click="editRelation">修改</el-button>
                        </el-form-item>
                    </el-form>
                    <el-form ref="form" :model="edgeform" label-width="100px" :rules="form.rules" v-show="selRelation && edgeform.visible">
                        <el-form-item label="时间" prop="time">
                            <el-autocomplete v-model="edgeform.time" :fetch-suggestions="timeSearch" placeholder="请输入日期"></el-autocomplete>
                            <!--<el-select v-model="edgeform.time" filterable allow-create default-first-option placeholder="选择日期时间">-->
                                <!--<el-option v-for="item in times" :key="item.value" :label="item.value" :value="item.value"></el-option>-->
                            <!--</el-select>-->
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="background-color:#3579f8;" @click="editRelation">修改</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </el-container>
</template>

<script>
    import $ from 'jquery';

    export default {
        name: "imageDetail",
        data() {
            const validateDate = (rule, value, callback) => {
                const sDate = value ? value.replace(/(^\s+|\s+$)/g,'') : '';
                if(sDate === ''){
                    callback();
                    return false;
                }

                if (sDate.indexOf(' ') > 0) {
                    const result = sDate.match(/^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
                    if (result == null) {
                        callback(new Error('格式不正确'));
                        return false;
                    }
                    const d = new Date(result[1], result[3] - 1, result[4], result[5], result[6], result[7]);
                    if (d.getFullYear() == result[1] && (d.getMonth() + 1) == result[3] && d.getDate() == result[4] && d.getHours() == result[5] && d.getMinutes() == result[6] && d.getSeconds() == result[7]) {
                        callback();
                    } else {
                        callback(new Error('格式不正确'));
                        return false;
                    }
                } else {
                    const result = sDate.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
                    if (result == null) {
                        callback(new Error('格式不正确'));
                        return false;
                    }
                    const d = new Date(result[1], result[3] - 1, result[4]);
                    if (d.getFullYear() == result[1] && d.getMonth() + 1 == result[3] && d.getDate() == result[4]) {
                        callback();
                    } else {
                        callback(new Error('格式不正确'));
                        return false;
                    }
                }
            };
            return {
                times: [],
                editType: 'nodes',
                showTypeLabels: false,
                typeLabels: [],
                showEntityLabels: false,
                entityLabels: [],
                showOtherscLabels: false,
                otherscLabels: [],
                countys: [],
                selRelation: '',
                labelsData: {},
                relationForm: {
                    rules:{
                        relationObject1: [{required: true, message: '不能为空'}],
                        relationObject2: [{required: true, message: '不能为空'}],
                        relationTime: [{validator: validateDate, trigger: 'blur'}]
                    },
                    relationType: '',
                    relationObject1: '',
                    relationObject2: '',
                    relationObject3: '',
                    relationTime: ''
                },
                aliasForm: {
                    visible: false,
                    correlation: [],
                    alias: '',
                    keyword: '',
                    labels: []
                },
                addNodeForm: {
                    rules:{
                        label: [{required: true, message: '不能为空'}]
                    },
                    label: [],
                    node: {name: '', label: '', county: ''},
                    lat: {value: '', type: 'N'},
                    lng: {value: '', type: 'E'},
                    county: '',
                    selStr: '',
                    selId: ''
                },
                webData: {},
                nodeObj: {},
                nodeNum: 0,
                form: {
                    rules:{
                        name: [{required: true, message: '不能为空'}],
                        startTime: [{validator: validateDate, trigger: 'blur'}],
                        endTime: [{validator: validateDate, trigger: 'blur'}]
                    },
                    visible: false,
                    name: '',
                    desc: '',
                    startTime: '',
                    endTime: '',
                    nature: '',
                    level: '',
                },
                edgeform: {
                    rules:{time: [{validator: validateDate, trigger: 'blur'}]},
                    visible: false,
                    time: ''
                },
                graphView: null,
                apiContentUrl: ''
            }
        },
        methods: {
            init: function (type) {
                const loading = this.$loading({
                    lock: true,
                    text: '正在分析中...',
                    target: this.$refs['image-detail'].$el
                });

                switch (type) {
                    case 'news': this.apiContentUrl = 'api/getDetailsID'; break;
                    case 'text': this.apiContentUrl = 'api/getTxtsID'; break;
                }

                this.$store.dispatch('ajax', {
                    // url: 'local:/json/web' + this.$route.query.id + '.json', succeed: (res) => {
                    url: 'api/newsDetail', method: 'get', data: {id: this.$route.query.id}, succeed: (res) => {
                        this.webData = res.data;
                        this.webData.auther = this.webData.time + '　　来源： ' + this.webData.author;
                        this.webData.htData = {
                            "v": "6.1.5",
                            "p": {
                                "autoAdjustIndex": true,
                                "hierarchicalRendering": false
                            },
                            "d": []
                        };

                        this.$store.dispatch('ajax', {
                            url: 'api/product',
                            data: {
                                title: this.webData.title,
                                auther: this.webData.auther,
                                content: this.webData.content
                            },
                            method: 'post',
                            succeed: (res2) => {
                                loading.close();
                                // res2.data = res.test.data;
                                for (const item of res2.data.time) {
                                    this.times.push({value: item.correspondingtime, label: item.timeword});
                                }

                                let content = '';
                                for (const item of res2.data.content) {
                                    // if (['county', 'othersc', 'keyword', 'state'].indexOf(item.nature) !== -1) {
                                    //     content += '<span class="color-' + item.nature + '">' + item.word + '</span>';
                                    //     this.setNodeObj(item.nature, item.z);
                                    // } else if (this.entityNames.indexOf(item.nature) !== -1) {
                                    //     content += '<span class="color-entity">' + item.word + '</span>';
                                    //     this.setNodeObj(item.nature, item.z);
                                    // } else if (this.typeNames.indexOf(item.nature) !== -1) {
                                    //     content += '<span class="color-type">' + item.word + '</span>';
                                    //     this.setNodeObj(item.nature, item.z);
                                    // } else {
                                    //     content += item.word;
                                    // }
                                    switch (item.type) {
                                        case 1:
                                            content += '<span class="color-type">' + item.word + '</span>';
                                            break;
                                        case 2:
                                            content += '<span class="color-entity">' + item.word + '</span>';
                                            break;
                                        case 3:
                                            content += '<span class="color-county">' + item.word + '</span>';
                                            break;
                                        case 4:
                                            content += '<span class="color-othersc">' + item.word + '</span>';

                                            item.dubious.forEach((dubious, index) => {
                                                if (item.dubious.length > 1 && index === 0) {
                                                    return;
                                                }
                                                // this.setNodeObj(dubious.name, dubious.label, dubious.type, dubious.county);
                                                this.setNodeObj({name: dubious.name, label: dubious.label, type: dubious.type, county: dubious.county});
                                            });
                                            break;
                                        case 5:
                                            content += '<span class="color-unknown">' + item.word + '</span>';
                                            break;
                                        case -1:
                                            content += '<span class="color-keyword">' + item.word + '</span>';
                                            break;
                                        default:
                                            content += item.word;
                                            break;
                                    }
                                }
                                this.webData.content = content;
                                const iframe = this.$refs['content-iframe'];
                                const iframeDoc = document.all ? iframe.contentWindow.document : iframe.contentDocument;

                                iframeDoc.open();
                                iframeDoc.write(`<html><head><link rel="stylesheet" type="text/css" href="${this.$store.state.baseUrl}style/news.css"></head><body><div class="content">${this.webData.content}</div></body></html>`);
                                iframeDoc.close();
                                iframeDoc.contentEditable = true;
                                iframeDoc.designMode = 'on';
                                setTimeout(function() {
                                    const height = $(iframeDoc).outerHeight();
                                    $(iframe).height(height);
                                }, 500);

                                iframeDoc.addEventListener('click', () => {
                                    let e = top.document.createEvent("mouseEvents");
                                    e.initEvent("click", true, true);
                                    top.document.dispatchEvent(e);
                                }, true);


                                let htNode = {};
                                let relationship = [];
                                for (const item of res2.data.relevance) {
                                    let node = {};
                                    let nodeColor = '';
                                    if (item.c === 'ht.HtmlNode') {
                                        let nameObj = item.name[0];
                                        if (item.name.length > 1) {
                                            nameObj = item.name[0];
                                            nameObj.realName = item.name[1].name;
                                        }

                                        if (htNode[nameObj.name] === undefined) {
                                            htNode[nameObj.name] = item;
                                            // this.setNodeObj(nameObj.name, nameObj.label, nameObj.type, nameObj.county);
                                            this.setNodeObj({name: nameObj.name, label: nameObj.label, type: nameObj.type, county: nameObj.county});
                                            this.nodeObj[nameObj.name].i = item.i.toString();
                                        // } else {
                                        //     continue;
                                        }

                                        switch (nameObj.type) {
                                            case 1: nodeColor = 'type'; break;
                                            case 2: nodeColor = 'entity'; break;
                                            case 3: nodeColor = 'county'; break;
                                            case 4: nodeColor = 'othersc'; break;
                                            case 5: nodeColor = 'unknown'; break;
                                            case -1: nodeColor = 'keyword'; break;
                                        }

                                        node = {
                                            "c": "ht.HtmlNode",
                                            "i": item.i.toString(),
                                            "p": {
                                                "html": "<div class=\"system system-property bg-" + nodeColor + "\" title='" + nameObj.name + "'>" + nameObj.name + "</div>"
                                            },
                                            "a": {
                                                "names": item.name,
                                                // "index": item.name.length > 1 ? 1 : 0,
                                                "index": 0,
                                                "word": item.name[0].name,
                                                "verify": false
                                            },
                                            "s": {
                                                "label.font": "4px Aria"
                                            }
                                        };
                                        relationship.push(node);
                                    } else if (item.c === 'ht.Edge') {
                                        node = {
                                            "c": "ht.Edge",
                                            "i": item.p.source.__i + "-" + item.p.target.__i + "-" + Math.random(),
                                            "p": {
                                                "source": {
                                                    "__i": item.p.source.__i.toString()
                                                },
                                                "target": {
                                                    "__i": item.p.target.__i.toString()
                                                }
                                            },
                                            "a": {
                                                "关系描述": item.s.label,
                                                "关系标签": item.f,
                                                "关系类型": item.d,
                                                "开始时间": item.time,
                                                "结束时间": item.etime,
                                                "核心描述词": item.s.label,
                                                "坐标": (item.longitude && item.latitude) ? item.latitude + ',' + item.longitude : ''
                                            },
                                            "s": {
                                                "label": item.s.label,
                                                "label.color": "gray",
                                                "label.font": "6px arial",
                                                "label.offset.y": -5,
                                                "edge.width": 0.5,
                                                "edge.color": "gray",
                                                "icons": {
                                                    "toArrow": {
                                                        "position": 19,
                                                        "keepOrien": true,
                                                        "width": 30,
                                                        "height": 15,
                                                        "names": ["toArrow"]
                                                    }
                                                }
                                            }
                                        };
                                        relationship.push(node);
                                    }
                                }
                                this.webData.htData.d = relationship;
                                this.htInit();
                            }
                        });
                    }
                });
            },
            htInit: function () {
                let moveXY = 0;
                let $this = this;
                let details_info = this.$refs.details_info;
                let dataModel = new ht.DataModel();
                let graphView = new ht.graph.GraphView(dataModel);
                let view = graphView.getView();
                view.className = 'main';
                details_info.innerHTML = '';
                details_info.appendChild(view);
                graphView.setEditable(true);
                this.graphView = graphView;

                const iframe = $this.$refs['content-iframe'];
                const iframeDoc = document.all ? iframe.contentWindow.document : iframe.contentDocument;
                const reg = new RegExp('<span class="select-text">(.+?)</span>', 'gm');
                let regStr = null;
                do {
                    regStr = reg.exec(iframeDoc.body.innerHTML);
                    if (regStr) {
                        iframeDoc.body.innerHTML = iframeDoc.body.innerHTML.replace(regStr[0], regStr[1]);
                    }
                } while (regStr)

                dataModel.addDataModelChangeListener((e) => {
                    // else if(e.kind === 'remove'){
                    //     output = e.data + ' removed, ';
                    // }
                    // else if(e.kind === 'clear'){
                    //     output = 'data model cleared, ';
                    // }
                    // output += 'size:' + dataModel.size();

                    if(e.kind === 'add' && e.data instanceof ht.HtmlNode){
                        if (e.data._attrObject.names.length > 1) {
                            if (e.data._attrObject.verify) {
                                e.data.addStyleIcon('ok', {
                                    "position": 24,
                                    "offsetX": -5,
                                    "offsetY": -5,
                                    "width": 8,
                                    "height": 8,
                                    "names": ["ok-icon"]
                                });
                            } else {
                                e.data.addStyleIcon('alarm', {
                                    "position": 24,
                                    "offsetX": -5,
                                    "offsetY": -5,
                                    "width": 8,
                                    "height": 8,
                                    "names": ["alarm-icon"]
                                });
                            }
                        }
                        if (e.data._attrObject.type === 5) {
                            if (e.data._attrObject.verify) {
                                e.data.addStyleIcon('ok', {
                                    "position": 24,
                                    "offsetX": -5,
                                    "offsetY": -5,
                                    "width": 8,
                                    "height": 8,
                                    "names": ["ok-icon"]
                                });
                            } else {
                                e.data.addStyleIcon('alarm', {
                                    "position": 24,
                                    "offsetX": -5,
                                    "offsetY": -5,
                                    "width": 8,
                                    "height": 8,
                                    "names": ["alarm-icon2"]
                                });
                            }
                        }
                    } else if (e.kind === 'remove') {
                        for (const i in this.webData.htData.d) {
                            const item = this.webData.htData.d[i];
                            if (item.i === e.data._id) {
                                this.webData.htData.d.splice(i, 1);
                                break;
                            }
                        }
                        if (e.data instanceof ht.HtmlNode) {
                            const name = e.data._attrObject.names[e.data._attrObject.index].name;
                            if (this.nodeObj[name]) {
                                this.nodeObj[name].i = '-1';
                            }
                        }
                    }
                });
                graphView.addInteractorListener(function (e) {
                    if (e.kind !== 'clickData' && e.kind !== 'clickBackground') {
                        return false;
                    }

                    do {
                        regStr = reg.exec(iframeDoc.body.innerHTML);
                        if (regStr) {
                            iframeDoc.body.innerHTML = iframeDoc.body.innerHTML.replace(regStr[0], regStr[1]);
                        }
                    } while (regStr)
                    $this.selRelation = null;
                    $this.form.visible = false;
                    $this.edgeform.visible = false;

                    if (e.data instanceof ht.HtmlNode) {
                        const temp = e.data._attrObject.names[e.data._attrObject.index];
                        if (temp.type === -1) {
                            $this.selRelation = e.data;
                            $this.form.visible = true;
                            $this.form.name = temp.name;
                            $this.form.desc = e.data._attrObject.desc;
                            $this.form.startTime = e.data._attrObject.startTime;
                            $this.form.endTime = e.data._attrObject.endTime;
                            $this.form.nature = e.data._attrObject.nature;
                            $this.form.level = e.data._attrObject.level;
                        }

                        const source = e.data._attrObject.word;
                        iframeDoc.body.innerHTML = iframeDoc.body.innerHTML.replace(new RegExp(source, 'gm'), '<span class="select-text">' + source + '</span>');
                    } else if (e.data instanceof ht.Edge) {
                        $this.selRelation = e.data;
                        $this.edgeform.visible = true;
                        $this.edgeform.time = e.data._attrObject['开始时间'];
                    }
                });
                view.addEventListener('mousedown', function (e) {
                    moveXY = e.clientX + e.clientY;
                });
                view.addEventListener('mouseup', function (e) {
                    moveXY -= moveXY === 0 ? 0 : e.clientX + e.clientY;
                });

                let style = graphView.getView().style;
                style.left = '0';
                style.top = '0';
                style.right = '0';
                style.bottom = '0';
                // console.log(JSON.stringify(this.webData.htData));

                const contextmenu = new ht.widget.ContextMenu();
                contextmenu.enableGlobalKey();
                contextmenu.addTo(view);
                contextmenu.beforeShow = function (e) {
                    let node = graphView.getDataAt(e);
                    let json = [];

                    if (node instanceof ht.HtmlNode && node._attrObject.names.length > 1) {
                        for (const index in node._attrObject.names) {
                            const item = node._attrObject.names[index];
                            if (index === '0') {
                                json.push({
                                    label: node._attrObject.names[0].name,
                                    disabled: true
                                });
                                json.push('separator');
                                json.push({
                                    label: '新类型',
                                    action: function () {
                                        $this.selNode('type', 1, item.name, node._id);
                                        $this.editType = 'nodes';
                                    }
                                });
                                json.push({
                                    label: '新实体',
                                    action: function () {
                                        $this.selNode('entity', 2, item.name, node._id);
                                        $this.editType = 'nodes';
                                    }
                                });
                                json.push({
                                    label: '新地区',
                                    action: function () {
                                        $this.selNode('othersc', 4, item.name, node._id);
                                        $this.editType = 'nodes';
                                    }
                                });
                                json.push('separator');
                                continue;
                            }
                            json.push({
                                label: item.name + ' <' + item.label + '>',
                                action: function (data) {
                                    this.node.removeStyleIcon('alarm');
                                    this.node.removeStyleIcon('ok');
                                    this.node.addStyleIcon('ok', {
                                        position: 24,
                                        offsetX: -5,
                                        offsetY: -5,
                                        width: 8,
                                        height: 8,
                                        names: ['ok-icon']
                                    });

                                    for (const item of $this.webData.htData.d) {
                                        if (item.i === this.node._id) {
                                            let nodeColor = '';
                                            const nameObj = this.node._attrObject.names[data._id - 6];
                                            switch (nameObj.type) {
                                                case 1:
                                                    nodeColor = 'type';
                                                    break;
                                                case 2:
                                                    nodeColor = 'entity';
                                                    break;
                                            }
                                            item.p.html = "<div class=\"system system-property bg-" + nodeColor + "\" title='" + nameObj.name + "'>" + nameObj.name + "</div>";
                                            item.a.index = data._id - 6;
                                            item.a.verify = true;
                                            $this.htInit();
                                        }
                                    }
                                },
                            });
                        }
                        this.setItems(json);
                        this.node = node;
                    } else if (node instanceof ht.HtmlNode && node._attrObject.names[0].type === 5) {
                        const item = node._attrObject.names[0];
                        json.push({
                            label: node._attrObject.names[0].name,
                            disabled: true
                        });
                        json.push('separator');
                        json.push({
                            label: '新类型',
                            action: function () {
                                $this.selNode('type', 1, item.name, node._id);
                                $this.editType = 'nodes';
                            }
                        });
                        json.push({
                            label: '新实体',
                            action: function () {
                                $this.selNode('entity', 2, item.name, node._id);
                                $this.editType = 'nodes';
                            }
                        });
                        json.push({
                            label: '新地区',
                            action: function () {
                                $this.selNode('othersc', 4, item.name, node._id);
                                $this.editType = 'nodes';
                            }
                        });
                    }
                    this.setItems(json);
                };

                graphView.dm().deserialize(this.webData.htData, null, true);
                graphView.enableToolTip();
                graphView.getToolTip = function (e) {
                    const node = graphView.getDataAt(e);
                    if (!(node && node._attrObject)) {
                        return;
                    }
                    if (node instanceof ht.HtmlNode && node._attrObject.names) {
                        return node._attrObject.names[node._attrObject.index].name;
                    } else if (node instanceof ht.Edge && node._attrObject['开始时间']) {
                        return node._attrObject['开始时间'];
                    }

                };

                let autoLayout = new ht.layout.AutoLayout(graphView);
                autoLayout.setAnimate(true);
                autoLayout.layout('circular', function () {
                    graphView.fitContent(true);
                });
            },
            selNode: function (label, type, str, id) {
                const selText = str ? str : this.selText();

                if (!selText) {
                    return false;
                }

                this.showEntityLabels = false;
                this.showTypeLabels = false;
                this.showOtherscLabels = false;

                if (label === 'entity') {
                    this.showEntityLabels = true;
                    this.$refs.addEntityForm.resetFields();
                } else if (label === 'type') {
                    this.showTypeLabels = true;
                    this.$refs.addTypeForm.resetFields();
                } else if (label === 'othersc') {
                    this.showOtherscLabels = true;
                    this.$refs.addOtherscForm.resetFields();
                }
                this.aliasChange(selText, type);

                if (str) {
                    this.addNodeForm.selStr = str;
                    this.addNodeForm.selId = id;
                } else {
                    this.addNodeForm.selStr = '';
                    this.addNodeForm.selId = '';
                }
            },
            selText: function () {
                const iframe = this.$refs['content-iframe'];
                const iframeDoc = document.all ? iframe.contentWindow.document : iframe.contentDocument;
                return iframeDoc.getSelection().toString();
            },
            setText: function(type) {
                const iframe = this.$refs['content-iframe'];
                const iframeDoc = document.all ? iframe.contentWindow.document : iframe.contentDocument;
                const selText = iframeDoc.getSelection().toString();

                if (selText === '') {
                    return false;
                }
                iframeDoc.body.innerHTML = iframeDoc.body.innerHTML.replace(new RegExp(selText, 'gm'), '<span class="color-' + type + '">' + selText + '</span>');
                iframeDoc.getSelection().removeAllRanges();
            },
            // setNodeObj: function (name, label, type, county, id) {
            //     let i = '-1';
            //     if (this.nodeObj[name]) {
            //         i = this.nodeObj[name].i;
            //     } else {
            //         i = id ? id : '-1';
            //     }
            //     this.nodeObj[name] = {name: name, label: label, type: type, county: county, i: i};
            // },
            setNodeObj: function (data) {
                let i = '-1';
                if (this.nodeObj[data.name]) {
                    i = this.nodeObj[data.name].i;
                } else {
                    i = data.i ? data.i : '-1';
                }
                this.nodeObj[data.name] = Object.assign({}, data, {i: i});
            },
            saveNode: function () {
                let formName = '';

                if (this.showEntityLabels) {
                    formName = 'addEntityForm';
                } else if (this.showTypeLabels) {
                    formName = 'addTypeForm';
                } else if (this.showOtherscLabels) {
                    formName = 'addOtherscForm';
                }

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let type = 2;
                        let selText = this.selText();
                        if (this.addNodeForm.selStr) {
                            selText = this.addNodeForm.selStr;
                        }
                        if (this.showEntityLabels) {
                            this.setText('entity');
                            type = 2;
                        } else if (this.showTypeLabels) {
                            this.setText('type');
                            type = 1;
                        } else if (this.showOtherscLabels) {
                            this.setText('othersc');
                            type = 4;
                        }
                        if (this.addNodeForm.node.county === '') {
                            this.addNodeForm.node.name = selText;
                        } else {
                            this.addNodeForm.label = [this.addNodeForm.node.label];
                            this.addNodeForm.county = this.addNodeForm.node.county;
                        }

                        const name = this.addNodeForm.node.name;
                        const label = this.addNodeForm.label[this.addNodeForm.label.length-1];
                        const county = this.addNodeForm.county;
                        // this.setNodeObj(name, label, type, county, this.addNodeForm.selId);

                        let nodeData = {name: name, label: label, type: type, county: county, i: this.addNodeForm.selId};
                        if (this.showOtherscLabels) {
                            let lat = Math.abs(this.addNodeForm.lat.value);
                            let lng = Math.abs(this.addNodeForm.lng.value);
                            nodeData.lat = this.addNodeForm.lat.type === 'N' ? lat : -lat;
                            nodeData.lng = this.addNodeForm.lng.type === 'E' ? lng : -lng;
                        }
                        this.setNodeObj(nodeData);

                        for (let item of this.webData.htData.d) {
                            if (item.i === this.addNodeForm.selId) {
                                let nodeColor = '';

                                switch (type) {
                                    case 1:
                                        nodeColor = 'type';
                                        break;
                                    case 2:
                                        nodeColor = 'entity';
                                        break;
                                    case 4:
                                        nodeColor = 'othersc';
                                        break;
                                    case 5:
                                        nodeColor = 'unknown';
                                        break;
                                }

                                item.p.html = "<div class=\"system system-property bg-" + nodeColor + "\" title='" + name + "'>" + name + "</div>";
                                item.a.names = [{name: name, label: label, type: type, county: county}];
                                item.a.index = 0;

                                if (nodeData.lat !== undefined && nodeData.lng !== undefined) {
                                    item.a.lat = nodeData.lat;
                                    item.a.lng = nodeData.lng;
                                }

                                this.htInit();
                                break;
                            }
                        }

                        this.showTypeLabels = false;
                        this.showEntityLabels = false;
                        this.showOtherscLabels = false;
                    }
                });
            },
            saveRelation: function () {
                this.$refs[this.relationForm.relationType].validate((valid) => {
                    if (valid) {
                        const selText = this.selText();
                        if (this.relationForm.relationType == '' || this.relationForm.relationObject1 == '' || this.relationForm.relationObject2 == '') {
                            return false;
                        }

                        // this.setNodeObj(selText, 'keyword', 10, '');
                        this.setNodeObj({name: selText, label: 'keyword', type: -1});
                        const startNode = this.nodeObj[this.relationForm.relationObject1];
                        const
                            endNode = ['事故', '维修', '任务'].indexOf(this.relationForm.relationObject2) === -1 ? this.nodeObj[this.relationForm.relationObject2] : {name: this.relationForm.relationObject2, label: this.relationForm.relationObject2, type: -1, i: "-1"};
                        if (startNode.i === "-1") {
                            let nodeColor = '';

                            switch (startNode.type) {
                                case 1:
                                    nodeColor = 'type';
                                    break;
                                case 2:
                                    nodeColor = 'entity';
                                    break;
                                case 4:
                                    nodeColor = 'othersc';
                                    break;
                                case 5:
                                    nodeColor = 'unknown';
                                    break;
                                case -1:
                                    nodeColor = 'keyword';
                                    break;
                            }

                            startNode.i = this.relationForm.relationObject1;
                            const node = {
                                "c": "ht.HtmlNode",
                                "i": startNode.i,
                                "p": {
                                    "html": "<div class=\"system system-property bg-" + nodeColor + "\" title='" + startNode.name + "'>" + startNode.name + "</div>"
                                },
                                "a": {
                                    // "names":[{name: startNode.name, label: startNode.label, type: startNode.type, county: startNode.county}],
                                    "names":[startNode],
                                    "index": 0
                                },
                                "s": {
                                    "label.font": "4px Aria"
                                }
                            };

                            this.webData.htData.d.push(node);
                        }
                        if (endNode.i === "-1") {
                            let nodeColor = '';

                            switch (endNode.type) {
                                case 1:
                                    nodeColor = 'type';
                                    break;
                                case 2:
                                    nodeColor = 'entity';
                                    break;
                                case 4:
                                    nodeColor = 'othersc';
                                    break;
                                case 5:
                                    nodeColor = 'unknown';
                                    break;
                                case -1:
                                    nodeColor = 'keyword';
                                    break;
                            }

                            endNode.i = endNode.type === -1 ? this.relationForm.relationObject2 + (++this.nodeNum) : this.relationForm.relationObject2;
                            const node = {
                                "c": "ht.HtmlNode",
                                "i": endNode.i,
                                "p": {
                                    "html": "<div class=\"system system-property bg-" + nodeColor + "\" title='" + endNode.name + "'>" + endNode.name + "</div>"
                                },
                                "a": {
                                    // "names": [{name: endNode.name, label: endNode.label, type: endNode.type, county: endNode.county}],
                                    "names": [endNode],
                                    "index": 0
                                },
                                "s": {
                                    "label.font": "4px Aria"
                                }
                            };

                            if (endNode.type === -1) {
                                node.a.names[node.a.index].name = this.relationForm.relationObject2;
                                // node.a.startTime = this.relationForm.relationTime;
                            } else {
                                // node.a.names = [{name: endNode.name, label: endNode.label, type: endNode.type, county: endNode.county}];
                                node.a.names = [endNode];
                            }

                            this.webData.htData.d.push(node);
                        }

                        const aObj = {
                            "关系描述": selText || this.relationForm.relationType,
                            "关系标签": "",
                            "关系类型": "",
                            "开始时间": this.relationForm.relationTime,
                            "结束时间": "",
                            "核心描述词": "",
                        };
                        switch (this.relationForm.relationType) {
                            case '移动':
                                aObj['关系描述'] = selText || '抵达';
                                aObj['关系标签'] = '位置关系';
                                aObj['关系类型'] = '移动关系';
                                break;
                            case '配置':
                                aObj['关系标签'] = '结构关系';
                                aObj['关系类型'] = '配置关系';
                                break;
                            case '编成':
                                aObj['关系标签'] = '结构关系';
                                aObj['关系类型'] = '编成关系';
                                break;
                            case '活动':
                                aObj['关系标签'] = '活动事件关系';
                                aObj['关系类型'] = this.relationForm.relationObject2 + '关系';
                                switch (this.relationForm.relationObject2) {
                                    case '事故': aObj['关系类型'] = '事故故障关系'; break;
                                    case '维修': aObj['关系类型'] = '维修保障关系'; break;
                                    case '任务': aObj['关系类型'] = '执行任务关系'; break;
                                }
                                break;
                        }

                        const edge = {
                            "c": "ht.Edge",
                            "i": startNode.i + "-" + endNode.i,
                            "p": {
                                "source": {
                                    "__i": startNode.i
                                },
                                "target": {
                                    "__i": endNode.i
                                }
                            },
                            "a": aObj,
                            "s": {
                                "label": aObj['关系描述'],
                                "label.color": "gray",
                                "label.font": "6px arial",
                                "edge.width": 0.5,
                                "edge.color": "gray",
                                "icons": {
                                    "toArrow": {
                                        "position": 19,
                                        "keepOrien": true,
                                        "width": 30,
                                        "height": 15,
                                        "names": ["toArrow"]
                                    }
                                }
                            }
                        };
                        switch (this.relationForm.relationObject2) {
                            case '事故': edge.s.label = '发生事故'; break;
                            case '维修': edge.s.label = '进行维修'; break;
                            case '任务': edge.s.label = '实施任务'; break;
                        }

                        this.webData.htData.d.push(edge);

                        if (this.relationForm.relationObject3 !== '') {
                            const locationNode = this.nodeObj[this.relationForm.relationObject3];
                            if (locationNode.i === "-1") {
                                locationNode.i = this.relationForm.relationObject3;
                                const node = {
                                    "c": "ht.HtmlNode",
                                    "i": locationNode.i,
                                    "p": {
                                        "html": "<div class=\"system system-property bg-othersc\" title='" + locationNode.name + "'>" + locationNode.name + "</div>"
                                    },
                                    "a": {
                                        // "names": [{name: locationNode.name, label: locationNode.label, type: locationNode.type}],
                                        "names": [locationNode],
                                        "index": 0
                                    },
                                    "s": {
                                        "label.font": "4px Aria"
                                    }
                                };

                                this.webData.htData.d.push(node);
                            }

                            const edge1 = {
                                "c": "ht.Edge",
                                "i": startNode.i + "-" + locationNode.i,
                                "p": {
                                    "source": {
                                        "__i": startNode.i
                                    },
                                    "target": {
                                        "__i": locationNode.i
                                    }
                                },
                                "a": {
                                    "关系描述": "发生于",
                                    "关系标签": "位置关系",
                                    "关系类型": "移动关系",
                                    "开始时间": this.relationForm.relationTime,
                                    "结束时间": '',
                                    "核心描述词": '抵达'
                                },
                                "s": {
                                    "label": "发生于",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            };
                            this.webData.htData.d.push(edge1);

                            const edge2 = {
                                "c": "ht.Edge",
                                "i": endNode.i + "-" + locationNode.i,
                                "p": {
                                    "source": {
                                        "__i": endNode.i
                                    },
                                    "target": {
                                        "__i": locationNode.i
                                    }
                                },
                                "a": {
                                    "关系描述": "发生于",
                                    "关系标签": "位置关系",
                                    "关系类型": "活动事件地点关系",
                                    "开始时间": this.relationForm.relationTime,
                                    "结束时间": '',
                                    "核心描述词": ''
                                },
                                "s": {
                                    "label": "发生于",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            };
                            this.webData.htData.d.push(edge2);
                        }

                        this.htInit();
                        this.relationForm.relationType = '';
                        this.relationForm.relationObject1 = '';
                        this.relationForm.relationObject2 = '';
                        this.relationForm.relationObject3 = '';
                        this.relationForm.relationTime = '';
                        this.setText('keyword');
                    }
                });
            },
            editRelation: function () {
                for (const item of this.webData.htData.d) {
                    if (item.i === this.selRelation._id) {
                        if (this.selRelation instanceof ht.HtmlNode) {
                            item.a.names[item.a.index].name = this.form.name;
                            item.a.desc = this.form.desc;
                            item.a.startTime = this.form.startTime;
                            item.a.endTime = this.form.endTime;
                            item.a.nature = this.form.nature;
                            item.a.level = this.form.level;

                            item.p.html = "<div class=\"system system-property bg-keyword\" title='" + this.form.name+ "'>" + this.form.name + "</div>";
                        } else if (this.selRelation instanceof ht.Edge) {
                            item.a['开始时间'] = this.edgeform.time;
                        }
                        this.htInit();
                    }
                }
                this.selRelation = null;
            },
            selRelationChange: function (value) {
                this.$refs[value].resetFields();
            },
            timeSearch(str, cb) {
                const results = str ? this.times.filter(this.createFilter(str)) : this.times;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(str) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(str.toLowerCase()) === 0);
                };
            },
            importAnalyze: function () {
                // const htData = JSON.parse(this.graphView.dm().serialize());
                let data = {nodes: [], relation: []};

                for (const item of this.webData.htData.d) {
                    if (item.c === 'ht.HtmlNode') {
                        const temp = item.a.names[item.a.index];
                        let node = {
                            id: item.i,
                            '名称': temp.realName ? temp.realName: temp.name,
                            '节点标签': temp.label,
                            '国家': temp.county
                        };

                        if (temp.type == -1) {
                            switch (temp.label) {
                                case '事故': node['节点标签'] = '事故故障实体节点'; break;
                                case '维修': node['节点标签'] = '维修保障节点'; break;
                                case '任务': node['节点标签'] = '任务实体节点'; break;
                            }

                            node['描述'] = item.a.desc || '';
                            node['开始时间'] = item.a.startTime || '';
                            node['结束时间'] = item.a.endTime || '';
                            node['性质'] = item.a.nature || '';
                            node['程度'] = item.a.level || '';
                            node['信息来源'] = window.location.href;
                            node['涉及关系'] = '';
                        } else if (temp.type == 4) {
                            if (item.a.lat !== undefined && item.a.lng !== undefined) {
                                node['纬度'] = item.a.lat.toString();
                                node['经度'] = item.a.lng.toString();
                                node['别名'] = temp.name;
                            } else if (temp.lat !== undefined && temp.lng !== undefined) {
                                node['纬度'] = temp.lat.toString();
                                node['经度'] = temp.lng.toString();
                                node['别名'] = temp.name;
                            }
                        // } else if (temp.type == 5) {
                        //     Message({
                        //         type: 'warning',
                        //         showClose: true,
                        //         message: '图中有未知节点，请处理后再导入！',
                        //     });
                        //
                        //     return;
                        }

                        data.nodes.push(node);
                    } else if (item.c === 'ht.Edge') {
                        let edge = {startId: item.p.source.__i, endId: item.p.target.__i, '关系描述': item.a['关系描述'], '关系标签': item.a['关系标签'], '关系类型': item.a['关系类型'], '开始时间': item.a['开始时间'], '结束时间': '', '核心描述词': item.a['核心描述词']
                                || item.a['关系描述']};

                        if (item.a['坐标']) {
                            edge['坐标'] = item.a['坐标'];
                        }

                        data.relation.push(edge);
                    }
                }

                // console.log(JSON.stringify(data));
                // console.log(data, this.webData.htData.d,this.nodeObj);return;
                this.$store.dispatch('ajax', {
                    url: 'api/webpage/analyzeToLead',
                    data: data,
                    method: 'post',
                    succeed: () => {
                        this.$message.success('导入成功！');
                    }
                });
            },
            aliasFormOpen: function() {
                this.aliasForm.visible = true;
                this.$refs['aliasForm'].resetFields();
                this.aliasForm.alias = this.selText();
                this.aliasForm.keyword = this.selText();
                this.aliasForm.labels = [];
                this.aliasChange(this.aliasForm.keyword);
            },
            aliasChange: function (val, type) {
                if (val === '') {
                    return;
                }

                let data = {content: val};
                if (type) {
                    data.type = type;
                }

                this.$store.dispatch('ajax', {
                    url: 'api/select',
                    data: data,
                    method: 'post',
                    succeed: (res) => {
                        let data = {};
                        this.labelsData = res;
                        for (const item of res) {
                            if (data.hasOwnProperty(item.label)) {
                                data[item.label].children.push({label: item.name, value: item});
                            } else {
                                data[item.label] = {label: item.label, value: item.label, children: [{label: item.name, value: item}]};
                            }
                        }
                        for (const key in data) {
                            this.aliasForm.labels.push(data[key]);
                        }
                    }
                });
            },
            aliasSave: function () {
                const nodeLabel = this.aliasForm.correlation[0];
                let node = this.aliasForm.correlation[1];
                node.alias += (node.alias.length === 0 ? '' : '#~#') + this.aliasForm.alias;

                this.$store.dispatch('ajax', {url: 'api/alias/saveNodesName', method: 'put', data: {id: node.id.toString(), alias: node.alias, nodeLabel: nodeLabel}, succeed: () => {
                        this.$message.success('保存成功');
                        this.init(this.$route.query.type);
                        this.aliasForm.visible = false;
                    }
                });
            }
        },
        mounted: function () {
            ht.Default.setImage('toArrow', {
                width: 100,
                height: 50,
                comps: [
                    {
                        type: 'shape',
                        points: [2, 25, 30, 25],
                        borderWidth: 1,
                    },
                    {
                        type: 'shape',
                        points: [15, 5, 30, 25, 15, 45, 50, 25, 15, 5],
                        background: 'gray',
                        borderWidth: 1,
                    },
                ]
            });
            ht.Default.setImage('alarm-icon', {
                width: 100,
                height: 100,
                // opacity: { func: 'attr@alarm.opacity' },
                comps: [
                    {
                        type: 'triangle',
                        rect: [2, 2, 96, 96],
                        background: 'red'
                    },
                    {
                        type: 'rect',
                        rect: [45, 30, 10, 40],
                        background: 'white'
                    },
                    {
                        type: 'circle',
                        rect: [40, 72, 20, 20],
                        background: 'white'
                    }
                ]
            });
            ht.Default.setImage('alarm-icon2', {
                width: 100,
                height: 100,
                // opacity: { func: 'attr@alarm.opacity' },
                comps: [
                    {
                        type: 'triangle',
                        rect: [2, 2, 96, 96],
                        background: 'orange'
                    },
                    {
                        type: 'rect',
                        rect: [45, 30, 10, 40],
                        background: 'white'
                    },
                    {
                        type: 'circle',
                        rect: [40, 72, 20, 20],
                        background: 'white'
                    }
                ]
            });
            ht.Default.setImage('ok-icon', {
                width: 100,
                height: 100,
                // opacity: { func: 'attr@alarm.opacity' },
                comps: [
                    {
                        type: 'circle',
                        rect: [2, 2, 96, 96],
                        background: {
                            value: 'green',
                            func: 'attr@alarm.color'
                        }
                    },
                    {
                        type: 'rect',
                        rotation: Math.PI / 4,
                        rect: [52, 30, 10, 40],
                        background: 'white'
                    },
                    {
                        type: 'rect',
                        rotation: 90.1,
                        rect: [35, 48, 10, 20],
                        background: 'white'
                    }
                ]
            });

            document.addEventListener('click', (e) => {
                let flag = e.path.indexOf(document.getElementsByClassName('tool')[0]);
                if (flag !== -1) {
                    return;
                }
                this.showTypeLabels = false;
                this.showEntityLabels = false;
                this.showOtherscLabels = false;
                this.aliasForm.visible = false;
                this.aliasForm.correlation = [];
                this.relationForm.relationType = '';
                // this.addNodeForm.selLabel = [];

                if (this.$refs['correlation']) {
                    this.$refs['correlation'].menuVisible = false;
                }
            });

            this.$store.dispatch('ajax', {url: 'services/app-zonghe/api/converter/getLabelColumn', method: 'get', succeed: (res) => {
                    this.typeLabels = [];
                    this.entityLabels = [];
                    this.otherscLabels = [];

                    for (const row of res.rows) {
                        switch (row.type) {
                            case 1:
                                this.typeLabels.push(row);
                                break;
                            case 2:
                                this.entityLabels.push(row);
                                break;
                            case 4:
                                this.otherscLabels.push(row);
                                break;
                        }
                    }
                }
            });
            this.$store.dispatch('ajax', {url: 'api/entityList/queryEntityList', method: 'get', succeed: (res) => {
                    this.countys = res.rows;
                }
            });

            this.init(this.$route.query.type);
        }
    }
</script>
